<template>
  <div class="box">
    <div>
      <h2 style="font-weight: 700; display: inline-block">小区管理</h2>
      用于展示小区列表信息，以及增加、修改、删除等操作
    </div>
    <div class="tag">
      <el-form
        class="tag"
        ref="form"
        label-width="80px"
        :inline="true"
        size="normal"
      >
        <el-form-item label="">
          <inputView :title="plot" v-model.trim="queryData.name"></inputView>
        </el-form-item>
        <el-form-item label="">
          <inputView
            :title="developers"
            v-model.trim="queryData.developer"
          ></inputView>
        </el-form-item>
        <el-form-item label="">
          <inputView
            :title="tenement"
            v-model.trim="queryData.estate"
          ></inputView>
        </el-form-item>
        <el-form-item label="">
          <time-view
            ref="timer"
            :title="createTime"
            v-model="queryData.create_time"
          />
        </el-form-item>
        <el-form-item class="button">
          <el-button size="small" @click="reset">重置</el-button>
          <el-button size="small" type="primary" @click="serach"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <div class="nothing">
        <el-button
          size="small"
          type="primary"
          @click="$refs.aside.drawer = true"
          style="margin-left: 1400px; margin-top: 15px"
          >新增</el-button
        >
      </div>
      <div class="aside">
        <aside-view ref="aside" @close="close">
          <template #aside>
            <el-tabs value="1" style="margin-left: 20px">
              <el-tab-pane label="基础信息" name="1">
                <el-form
                  :model="formData"
                  :rules="rules"
                  label-position="top"
                  ref="form"
                  label-width="80px"
                  :inline="false"
                  size="normal"
                >
                  <el-row :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="小区名称" prop="name">
                        <input-view v-model="formData.name" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="坐落地址" prop="address">
                        <input-view v-model="formData.address" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="占地面积" prop="area">
                        <input-view v-model="formData.area" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="开发商名称" prop="developer">
                        <input-view v-model="formData.developer" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="物业公司名称" prop="estate">
                        <input-view v-model="formData.estate" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="绿化率" prop="greening_rate">
                        <input-view v-model="formData.greening_rate" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="总栋数" prop="total_building">
                        <input-view v-model="formData.total_building" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="总户数" prop="total_owner">
                        <input-view v-model="formData.total_owner" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="详细信息" name="2">
                <div style="display: flex">
                  <upload-view v-model="formData.thumb" />

                  <div
                    style="
                      margin: 100px 0 0 50px;
                      font-size: 12px;
                      display: flex;
                    "
                  >
                    <div>
                      <div>经纬度</div>
                      <el-input type="text" v-model="formData.position" />
                    </div>
                    <div style="margin-left: 0px; margin-top: 15px">
                      <el-button
                        type="primary"
                        @click="$refs.map.isMapShow = true"
                        >点击获取</el-button
                      >
                    </div>
                  </div>
                </div>
                <div style="width: 700px; height: 300px">
                  <div style="border: 1px solid #ccc">
                    <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editorRef"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                    />
                    <Editor
                      style="height: 500px; overflow-y: hidden"
                      v-model="formData.introduction"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="handleCreated"
                    />
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div class="anniu">
              <div class="yidong">
                <el-button size="small">取消</el-button>
                <el-button size="small" type="primary" @click="btnOk"
                  >确定</el-button
                >
              </div>
            </div>
          </template>
        </aside-view>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="缩略图" width="140">
            <template slot-scope="{ row }">
              <div class="demo-image__preview">
                <el-image
                  v-if="row.thumb"
                  style="width: 100px; height: 100px"
                  :src="row.thumb[0]"
                  :preview-src-list="row.thumb"
                >
                </el-image>
                <el-image
                  v-else
                  style="width: 100px; height: 100px"
                  src="http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png"
                  :preview-src-list="up"
                />
              </div>
              <!-- <img :src="$webURL + row.thumb" alt="" /> -->
            </template>
          </el-table-column>
          <el-table-column prop="name" label="小区名称" width="140">
          </el-table-column>
          <el-table-column prop="address" label="坐落地址"> </el-table-column>
          <el-table-column prop="area" label="占地面积"> </el-table-column>
          <el-table-column prop="total_building" label="总栋数">
          </el-table-column>
          <el-table-column prop="greening_rate" label="绿化率">
          </el-table-column>
          <el-table-column prop="developer" label="开发商名称">
          </el-table-column>
          <el-table-column prop="estate" label="物业公司名称">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
            <template slot-scope="{ row }">
              {{ new Date(row.create_time).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="{ row }">
              <a href="javascript:;">
                <el-button size="mini" slot="reference" @click="review(row.id)">
                  <span style="color: #1890ff">编辑</span>
                </el-button>
              </a>
              &nbsp;
              <a href="javascript:;">
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="del(row.id)"
                >
                  <el-button size="mini" slot="reference"
                    ><span style="color: #1890ff">删除</span></el-button
                  >
                </el-popconfirm>
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--分页区域-->
    <div class="page">
      <!-- 3个变量(页码、每页数量、总数) 2个事件(每页数量切换事件/页码切换事件) -->
      <el-pagination
        :page-sizes="[4, 8, 10, 20]"
        :current-page.sync="queryData.current"
        :page-size="queryData.pageSize"
        @size-change="sizeChange"
        @current-change="currentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <my-map ref="map" @mapGps="lm" />
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

import AsideView from "./components/asideView.vue";
import inputView from "./components/inputView.vue";
import SelectView from "./components/selectView.vue";
import TimeView from "./components/timeView.vue";
import {
  addCommunityAll,
  delCommunityAll,
  editCommunityAll,
  getCommunityAll,
  reviewCommunityAll,
} from "@/api/community/community";
import UploadView from "./components/uploadView.vue";
import MyMap from "./components/my-map.vue";
export default {
  components: {
    inputView,
    TimeView,
    AsideView,
    SelectView,
    UploadView,
    MyMap,
    Editor,
    Toolbar,
  },
  data() {
    return {
      total:0,
      up:['http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'],
      m: "",
      plot: "小区名称",
      developers: "开发商名称",
      tenement: "物业公司",
      createTime: "创建时间",
      tableData: [],
      queryData: {
        current: 1,
        pageSize: 10,
        create_time: "",
        name: "",
        developer: "",
        estate: "",
      },
      formData: {
        address: "",
        area: "",
        developer: "",
        estate: "",
        greening_rate: "",
        introduction: "",
        name: "",
        position: "",
        thumb: "",
        total_building: "",
        total_owner: "",
        introduction: "",
        position: "",
        thumb: "",
      },
      rules: {
        address: [{ required: true, message: "请输入", trigger: "blur" }],
        area: [{ required: true, message: "请输入", trigger: "blur" }],
        developer: [{ required: true, message: "请输入", trigger: "blur" }],
        estate: [{ required: true, message: "请输入", trigger: "blur" }],
        greening_rate: [{ required: true, message: "请输入", trigger: "blur" }],
        introduction: [{ required: true, message: "请输入", trigger: "blur" }],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        position: [{ required: true, message: "请输入", trigger: "blur" }],
        thumb: [{ required: true, message: "请输入", trigger: "blur" }],
        total_building: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        total_owner: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getinitData();
  },
  methods: {
    // 每页数量切换事件
    sizeChange(val) {
      // console.log(val); // 最新每页数量
      this.queryData.pageSize = val;
      this.getinitData();
    },
    // 页码切换事件
    currentChange(val) {
      // console.log(111);
      // console.log(val); // 最新页码
      this.queryData.current = val;
      this.getinitData();
    },
    async getinitData() {
      const res = await getCommunityAll(this.queryData);
      // console.log(res);
      this.tableData = res.data.rows;
      // console.log(res.data);
      this.total = res.data.count
      this.tableData = res.data.rows.map((item) => {
        return {
          ...item,
          thumb: item.thumb
            ? item.thumb.split(",").map((item) => {
                return this.$webURL + item;
              })
            : null,
        };
      });
      // console.log(this.up);
    },
    //提交
    async btnOk() {
      await this.$refs.form.validate();
      this.formData.total_building = Number(this.formData.total_building);
      this.formData.total_owner = Number(this.formData.total_owner);
      this.formData.id
        ? editCommunityAll(this.formData)
        : await addCommunityAll(this.formData);
      this.$message.success("添加成功");
      // console.log(this.formData);
      this.getinitData();
      this.$refs.aside.drawer = false;
      this.formData = {
        address: "",
        area: "",
        developer: "",
        estate: "",
        greening_rate: "",
        introduction: "",
        name: "",
        position: "",
        thumb: "",
        total_building: "",
        total_owner: "",
        introduction: "",
        position: "",
        thumb: "",
      };
    },
    lm(e) {
      // console.log(e);
      this.formData.position = e.join(",");
      // console.log(this.formData.position);
    },
    close() {
      this.$refs.aside.id = "";
      this.formData = {
        address: "",
        area: "",
        developer: "",
        estate: "",
        greening_rate: "",
        introduction: "",
        name: "",
        position: "",
        thumb: "",
        total_building: "",
        total_owner: "",
        introduction: "",
        position: "",
        thumb: "",
      };
      this.$refs.form.clearValidate();
    },
    //删除
    async del(id) {
      // console.log(id);
      let res = await delCommunityAll(id);
      this.$message.success(res.msg);
      if (this.queryData.current > 1 && this.tableData.length === 1) {
        this.queryData.current--;
      }
      this.getinitData();
    },
    //回显
    async review(id) {
      this.$refs.aside.drawer = true;
      this.$refs.aside.id = id;
      let res = await reviewCommunityAll(id);
      //  console.log(res);
      this.formData = res.data;
      //  console.log(this.formData);
      this.getinitData()
    },
    //搜索
    serach() {
      // console.log(this.$refs.timer.alltime);
      // this.queryData.create_time = this.$refs.timer.alltime.join(',')
      this.queryData.current = 1;
      this.getinitData();
    },
    //重置
    reset() {
      this.$refs.timer.timer = "";
      this.queryData = {
        current: 1,
        pageSize: 10,
        create_time: "",
        name: "",
        developer: "",
        estate: "",
      };
      this.getinitData();
    },
  },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref("<p>hello</p>");

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
      }, 1500);
    });

    const toolbarConfig = {};
    const editorConfig = { placeholder: "请输入内容..." };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    return {
      editorRef,
      valueHtml,
      mode: "default", //默认模式
      mode: "simple", //简洁模式
      toolbarConfig,
      editorConfig,
      handleCreated,
    };
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-top: 30px;
  height: 100px;
  text-align: center;
  background-color: #fff;
}
.button {
  // display: flex;
  // width: 100px;
  margin-left: 300px;
  margin-top: 30px;
}
img {
  width: 120px;
  height: 120px;
}
::v-deep .el-table__header-wrapper {
  background-color: #fafafa !important;
}
.nothing {
  height: 60px;
}
.el-form-item__label {
  padding: 0;
}
.anniu {
  border-top: 1px solid #ccc;
  width: 750px !important;
  height: 50px;
  position: fixed;
  bottom: 0px;
  left: 1152px;
  background-color: white;
  .yidong {
    position: absolute;
    top: 10px;
    right: 30px;
  }
}
.box {
  width: 1640px;
  margin-left: 20px;
  padding: 60px 0;
  ::v-deep .el-input__inner {
    // width: 250px;
    height: 32px !important;
    margin-top: 5px;
  }
  .tag {
    background-color: #fff;
    height: 150px;
    display: flex;
    align-items: center;
    padding: 0 30px;
  }
}

.content {
  background-color: #fff;
  margin-top: 40px;
  padding: 0 40px;
  .aside {
    z-index: 9999;
    position: absolute;
    top: 164px;
    right: 70px;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-left: 30px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>